<template>
    <div class="color-selector-container">
      <div class="selector-header">
        <h3>选择颜色</h3>
      </div>
      <!-- 颜色选择提示 -->
      <div v-if="!hasSelectedColor" class="color-selector-tip">
        请先选择一个颜色开始游戏
      </div>
      <!-- 颜色选择反馈 -->
      <div v-if="colorSelectionMessage" :class="['color-selection-feedback', colorSelectionType]">
        {{ colorSelectionMessage }}
      </div>
      <div class="color-options">
        <button 
          v-for="color in availableColors" 
          :key="color.name"
          class="color-option"
          :class="{ 
            'selected': gameStore.myColor === color.value, 
            'selected-by-others': roomStore.isColorSelected(color.value) && gameStore.myColor !== color.value
          }"
          :style="{ backgroundColor: color.value }"
          @click="selectColor(color.value)"
          :disabled="false"
          :title="roomStore.isColorSelected(color.value) ? '此颜色已被其他玩家选择' : (roomStore.gameStatus === 'playing' ? '游戏进行中，无法更换颜色' : '')"
        >
          <span v-if="gameStore.myColor === color.value" class="check-mark">✓</span>
          <span v-else-if="roomStore.isColorSelected(color.value)" class="cross-mark">✗</span>
        </button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useGameStore } from '@/stores/game'
  import { useRoomStore } from '@/stores/room'
  import { ref, computed, watch } from 'vue'
  
  const gameStore = useGameStore()
  const roomStore = useRoomStore()
  
  // 颜色选择反馈
  const colorSelectionMessage = ref('')
  const colorSelectionType = ref('success') // success, error, info
  
  // 可用颜色选项 - 与后端颜色系统保持一致
  const availableColors = [
    { name: '红色', value: '#FF4136' },
    { name: '蓝色', value: '#0074D9' },
    { name: '绿色', value: '#2ECC40' },
    { name: '黄色', value: '#FFDC00' },
    { name: '紫色', value: '#B10DC9' },
    { name: '橙色', value: '#FF851B' },
    { name: '青色', value: '#39CCCC' },
    { name: '粉色', value: '#FF1493' }
  ]
  
  // 检查是否已选择颜色
  const hasSelectedColor = computed(() => {
    return gameStore.myColor !== '#000'
  })
  
  // 显示颜色选择反馈
  const showColorFeedback = (message, type = 'success') => {
    colorSelectionMessage.value = message
    colorSelectionType.value = type
    
    // 3秒后隐藏反馈
    setTimeout(() => {
      colorSelectionMessage.value = ''
    }, 3000)
  }
  
  // 选择颜色
  const selectColor = async (color) => {
    // 游戏进行中不允许更换颜色
    if (roomStore.gameStatus === 'playing' && gameStore.myColor !== color) {
      showColorFeedback('游戏进行中，无法更换颜色', 'error')
      return
    }
    
    // 检查颜色是否已被其他玩家选择
    if (roomStore.isColorSelected(color)) {
      showColorFeedback('此颜色已被其他玩家选择，请选择其他颜色', 'error')
      return
    }
    
    // 只调用roomStore的setPlayerColor方法，因为它已经包含了同步到gameStore的逻辑
    const success = await roomStore.setPlayerColor(color)
    if (success) {
      showColorFeedback('颜色选择成功！', 'success')
    } else {
      showColorFeedback('颜色设置失败，请重试', 'error')
    }
  }
  </script>
  
  <style scoped>
  .color-selector-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    padding: 16px 24px;
    background: var(--surface-glass);
    background-image: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    transition: var(--transition);
  }
  
  .color-selector-container:hover {
    box-shadow: var(--shadow-lg), 0 0 20px rgba(59, 130, 246, 0.1);
  }
  
  .selector-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
  }
  
  .color-options {
    display: flex;
    gap: 16px;
    flex: 1;
    justify-content: center;
  }
  
  .color-option {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .color-option:hover:not(:disabled) {
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  
  .color-option.selected {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.6), 0 4px 16px rgba(0, 0, 0, 0.25);
    transform: scale(1.05);
  }
  
  .color-option.selected-by-others {
    border-color: rgba(255, 99, 71, 0.7);
    position: relative;
  }
  
  .color-option.selected-by-others::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
  }
  
  .color-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .check-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  .cross-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  /* 颜色选择提示 */
  .color-selector-tip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    animation: bounce 2s infinite;
  }
  
  .color-selector-tip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--primary);
  }
  
  /* 颜色选择反馈 */
  .color-selection-feedback {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
  }
  
  .color-selection-feedback.success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-light);
  }
  
  .color-selection-feedback.error {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-light);
  }
  
  .color-selection-feedback.info {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-light);
  }
  
  .color-selection-feedback::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
  }
  
  .color-selection-feedback.success::after {
    border-top: 6px solid var(--success-light);
  }
  
  .color-selection-feedback.error::after {
    border-top: 6px solid var(--error-light);
  }
  
  .color-selection-feedback.info::after {
    border-top: 6px solid var(--info-light);
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(0);
    }
    40% {
      transform: translateX(-50%) translateY(-10px);
    }
    60% {
      transform: translateX(-50%) translateY(-5px);
    }
  }
  
  .brush-size-control {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 150px;
  }
  
  .brush-size-control label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
  }
  
  .brush-size-slider {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
  }
  
  .brush-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .brush-size-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .brush-size-value {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary);
    min-width: 35px;
    text-align: center;
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .color-selector-container {
      flex-direction: column;
      gap: 16px;
      padding: 16px;
    }
    
    .color-options {
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    
    .color-option {
      width: 36px;
      height: 36px;
    }
  }
  
  @media (max-width: 480px) {
    .color-options {
      gap: 8px;
    }
    
    .color-option {
      width: 32px;
      height: 32px;
    }
  }
  </style>